.flow {
    width: 100%;
    height: 100%;
}

//.content {
//  width: 100%;
//  height: 100%;
//  display: flex;
//}

#stencil {
    width: 16%;
    height: 100%;
    position: relative;
    margin-right: 2px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.panel {
    //width: 69%;
    width: 100%;
    height: 100%;
}

.panel .toolbar {
    width: 100%;
    height: 38px;
    background-color: #f7f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    .bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        i {
            margin: 8px;
            font-size: 20px;
        }
    }
}

.panel #container {
    width: 100%;
    height: calc(100% - 38px);
}


.config {
    width: 15%;
    height: 100%;
    padding: 0 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.x6-widget-snapline-vertical {
    border-right-color: #ff4e50 !important;
}

.x6-widget-snapline-horizontal {
    border-bottom-color: #ff4e50 !important;
}

.x6-widget-selection-box {
    border: 1px dashed #5f95ff;
    margin-top: -3px;
    margin-left: -3px;
}

.x6-widget-selection-inner {
    border: 1px dashed #5f95ff;
}

.x6-widget-stencil-title:hover, .x6-widget-stencil-group > .x6-widget-stencil-group-title:hover {
    color: blue;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: -400;
    }
}

.animate-text1,
.animate-text2,
.animate-text3,
.animate-text4 {
    font-weight: bold;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 3s infinite linear;
}

.animate-text1 {
    stroke: #873bf4;
    text-shadow: 0 0 2px #873bf4;
    animation-delay: -1.5s;
}

.animate-text2 {
    stroke: #ff6e06;
    text-shadow: 0 0 2px #ff6e06;
    animation-delay: -3s;
}

.CodeMirror-gutter {
    background: #ffffff;
}
